<template>
  <div id="mymenu" class="application--wrap">
    <aside
      class="v-navigation-drawer v-navigation-drawer--absolute v-navigation-drawer--open theme--dark"
      style="height: 100%; margin-top: 0px; max-height: calc(100% - 0px); transform: translateX(0px); width: 300px;"
      overflow data-booted="true"
      >
      <v-navigation-drawer dark stateless value="true" >
        <v-list>
          <v-list-tile>
            <v-list-tile-action>
              <v-icon>home</v-icon>
            </v-list-tile-action>
            <v-list-tile-title>Home</v-list-tile-title>
          </v-list-tile>

          <v-list-group prepend-icon="account_circle" value="true">
            <v-list-tile slot="activator">
              <v-list-tile-title v-text="nickname">Users</v-list-tile-title>
            </v-list-tile>

            <!-- 管理员菜单
              <v-list-group no-action sub-group value="true">
              <v-list-tile slot="activator">
                <v-list-tile-title>Admin</v-list-tile-title>
              </v-list-tile>

              <v-list-tile v-for="(admin, i) in admins" :key="i">
                <v-list-tile-title v-text="admin[0]"></v-list-tile-title>
                <v-list-tile-action>
                  <v-icon v-text="admin[1]"></v-icon>
                </v-list-tile-action>
              </v-list-tile>
            </v-list-group> -->

            <v-list-group sub-group no-action>
              <v-list-tile slot="activator">
                <v-list-tile-title>Actions</v-list-tile-title>
              </v-list-tile>

              <v-list-tile v-for="(m, i) in menu" :key="i" @click="test(m.url)">
                <v-list-tile-title v-text="m.name"></v-list-tile-title>
                <v-list-tile-action>
                  <v-icon v-text="m[1]"></v-icon>
                </v-list-tile-action>
              </v-list-tile>
            </v-list-group>
 <v-list-group no-action sub-group value="true">
              <v-list-tile slot="activator">
                <v-list-tile-title>存储空间已使用{{(100-current_capacity).toFixed(2)}}%</v-list-tile-title>
              </v-list-tile>
               <v-list-tile>
                  <v-list-tile-title>
                    <v-progress-linear height="20" v-model="this.current_capacity" color="green"></v-progress-linear>
                  </v-list-tile-title>
               </v-list-tile>
 </v-list-group>

          </v-list-group>
        </v-list>
      </v-navigation-drawer>
    </aside>
    <nav
      class="v-toolbar v-toolbar--absolute theme--dark"
      data-booted="true"
      style="margin-top: 0px; padding-right: 0px; padding-left: 300px; transform: translateY(0px);"
    >
      <div class="v-toolbar__content" style="height: 64px;">
        <div class="v-toolbar__title">Vuetify</div>
      </div>
    </nav>
    <main class="v-content" data-booted="true" style="padding: 64px 0px 32px 300px;">
      <div class="v-content__wrap">
        <div class="v-content fluid">
          <div class="layout align-center justfy-center">
          <div class="flex xs12">
            
              
              <router-view><container/></router-view>
            
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer
      class="v-footer v-footer--fixed v-footer--inset theme--dark"
      style="height: 32px; padding-left: 300px;"
    >
      <span class="px-3">© 2018</span>
    </footer>
  </div>
</template>
<script>
// import Vue from "vue";
// import qs from 'qs';
// import container from "../components/container"

export default {

  name: "mymenu",
  data: () => ({
    admins: [["Management", "people_outline"], ["Settings", "settings"]],
    cruds: [
      ["Create", "add"],
      ["Read", "insert_drive_file"],
      ["Update", "update"],
      ["Delete", "delete"]
    ],
    menu: null,
    username: "",
    nickname: "",
    current_capacity:50
  }),
  beforeCreate() {
    var token = sessionStorage.getItem("token");
    if (token == null || token == "" || token == "undefined") {
      alert("未登陆");
      this.$router.push("/");
    }
  },
  created() {
    this.username = sessionStorage.getItem("username");
    this.getCapacity(); 
    this.getUserInfo();
    this.getUserMenu();
    this.$router.push("/container");
    
  },

  mounted() {},

  methods: {
    getUserInfo() {
      var token = sessionStorage.getItem("token");

      this.$http
        .post(
          "/user/getUserInfo/" + this.username + "?access_token=" + token,
          {}
        )
        .then(response => {
          var userInfo = response.data;
          this.nickname = userInfo.nickname;
          //  console.log(userInfo.nickname);
        });
    },

    getUserMenu() {
      var token = sessionStorage.getItem("token");
      this.$http
        .post(
          "/menu/getUserMenu/" + this.username + "?access_token=" + token,
          {}
        )
        .then(response => {
          

          if (response.status == 200) {
            this.menu = response.data;
            // console.log(this.menu);
          } 
          
        }).catch(error=>{
          if(error.response.status==401&&token!="undefine"){
            {
              
            token = null;
            sessionStorage.setItem("token", "");
            sessionStorage.setItem("username","");
            alert("登录失效，请重新登录！");
            this.$router.push("/");
          }
          }
        });
        
    },
    test: function(msg) {
      //alert(msg);
      this.$router.push(msg);
    },

    getCapacity(){
      this.$http.post("/user/getCapacity/"+this.username+ "?access_token=" + sessionStorage.getItem("token"),{})
      .then(response=>{
        
        this.current_capacity=response.data.restCapacity/response.data.maxCapacity*100;
        // this.current_capacity=88;
        //alert(this.current_capacity);
      })

    }

  }
};
</script>

<style scoped>
p {
  display: block;
  background: #ffe87c;
}
</style>
